<template>
	<view style="height: 100vh;display: flex;flex-direction: column;">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="text" active-color="#3187FB"></uni-segmented-control>
		
		
		<view v-if="current === 0" style="flex: 1;flex-basis: 50vh;">
			<scroll-view :enable-flex="true" :show-scrollbar="false" @scrolltolower="lower(remenwenzhangId)" :scroll-y="true"
			 style="width: 100%;height: 100%; display: flex;flex-direction: column; align-items: center;">
				<!-- 热门文章 -->
				<view class="remen_wezhang" v-for="(item, index) in remenwenzhangList" :key="index" @click="goWenzhangxiangqingPage(item.article_id)">
					<view class="remen_wezhang_top">{{item.post_title}}</view>
					<view class="remen_wezhang_cen">
						<image mode="aspectFill" :src="item.thumbnail" style="width: 100%;height: 300rpx;"></image>
					</view>
					<view class="remen_wezhang_bott">
						<view style="">{{item.published_time}}</view>
						<view style="margin-right: 40rpx;display: flex;">
							<image src="../../static/liulan.png" style="width: 22rpx;height: 22rpx;margin-top: 5rpx;margin-right: 8rpx;"></image>
							<p style="margin-top: 3rpx;">{{item.post_hits}}</p>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="current === 1" style="flex: 1;flex-basis: 50vh;">
			<scroll-view :enable-flex="true" :show-scrollbar="false" @scrolltolower="lower(jiaxiaozhinanId)" :scroll-y="true"
			 style="width: 100%;height: 100%; display: flex;flex-direction: column; align-items: center;">
				<!-- 驾校指南 -->
				<view class="remen_jiaolian" v-for="(item, index) in jiaxiaozhinanList" :key="index" @click="goWenzhangxiangqingPage(item.article_id)">
					<view class="remen_jiaolian_qian">
						<p style="width: 100%;height: 120rpx;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
						text-overflow: ellipsis;display: -webkit-box;">{{item.post_title}}</p>
						<view style="width: 100%;height: 26px;display: flex;justify-content: space-between;align-items: center; ">
							<p style="font-size: 22rpx;color: #666666;">{{item.published_time}}</p>
						</view>
					</view>
					<view class="remen_jiaolian_hou">
						<image :src="item.thumbnail" style="width: 220rpx;height: 160rpx;"></image>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue";
	import helper from '../../common/helper.js'
	export default {
		components: {
			uniSegmentedControl
		},
		
		data() {
			return {
				items: ['热门文章', '驾校指南'],
				current: 0,
				// 用于保存文章分类
				remenwenzhangId: 1,
				jiaxiaozhinanId: 26,
				remenwenzhangPage: 1, //热门文章当前所在页
				jiaxiaozhinanPage: 1, //驾校指南当前所在页
				//热门文章
				// cate_id: '', //分类ID
				// cate_name: '', //分类名称
				// article_id: '', //文章ID
				// post_title: '', //标题
				// post_excerpt: '', //简介
				// post_source: '', //发布人
				// thumbnail: '' //缩略图
				// post_hits:''//查看数量
				// published_time	发布时间
				remenwenzhangList: [],
				// 驾校指南
				// cate_id: '', //分类ID
				// cate_name: '', //分类名称
				// article_id: '', //文章ID
				// post_title: '', //标题
				// post_excerpt: '', //简介
				// post_source: '', //发布人
				// thumbnail: '' //缩略图
				// post_hits:''//查看数量
				// published_time	发布时间
				jiaxiaozhinanList: []
			}
		},
		onLoad(id) {
			//为了方便管理，把这两个分类的固定ID写在全局参数里面，免得以后ID变了，要来每个页面改，这样只需改全局参数helper里面就行了;
			this.remenwenzhangId = helper.remenwenzhangId;
			this.jiaxiaozhinanId = helper.jiaxiaozhinanId;
			//初始化数据
			this.getArtuckeData(this.jiaxiaozhinanPage, this.jiaxiaozhinanId);
			this.getArtuckeData(this.remenwenzhangPage, this.remenwenzhangId);
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			lower(id) {
				console.log("已到达页面最底部");
				// 根据触发的滑动窗口的id来判断该为哪个list刷新数据
				this.getArtuckeData(id);
			},
			// 去文章详情
			goWenzhangxiangqingPage(articleId) {
				console.log("id=", articleId)
				this.$Router.push({
					name: 'wenzhangxiangqing',
					params: {
						articleId: articleId
					}
				})
			},
			// 获取文章列表
			async getArtuckeData(page, cateId) {
				uni.$showLoading() 
				
				let res;
				try {
					res = await this.$request.get("api/Home/info_list", {
						data: {
							"cate_id": cateId,
							"page": page,
							"pagesize": 10
						}
					});
				} catch (e) {
					//TODO handle the exception
					return uni.showToast({
						title: "网络连接失败！",
						icon: "none"
					});
				}

				if (res.data.code == 1) {
					uni.hideLoading()
					//获取成功,根据ID来把对应的数据追加到数组
					if (cateId == 1) {
						this.remenwenzhangList = this.remenwenzhangList.concat(res.data.data);
					} else if (cateId == 26) {
						this.jiaxiaozhinanList = this.jiaxiaozhinanList.concat(res.data.data);
					}
				} else {
					//服务器返回码错误
					console.log(res);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.remen_wezhang {
		width: 100%;
		border-bottom: 1rpx solid #F0F0F0;

		.remen_wezhang_top {
			width: 100%;
			line-height: 70rpx;
			padding-left: 10rpx;
			font-weight: 800;
			font-size: 30rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.remen_wezhang_cen {
			width: 730rpx;
			margin: auto;
			display: flex;
		}

		.remen_wezhang_bott {
			width: 730rpx;
			height: 50rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 18rpx;
			color: #666666;
		}
	}

	.remen_jiaolian {
		width: 100%;
		height: 220rpx;
		border-bottom: 1rpx solid #F0F2F5;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.remen_jiaolian_qian {
			width: 450rpx;
			height: 180rpx;
			margin-left: 30rpx;
			margin-top: 20rpx;
		}

		.remen_jiaolian_hou {
			width: 220rpx;
			height: 160rpx;
			margin-right: 30rpx;
		}
	}
</style>
